<script setup>
import { ref, onMounted, computed } from 'vue'
import SearchBar from './components/SearchBar.vue'
import QuickLinks from './components/QuickLinks.vue'
import TimeWeather from './components/TimeWeather.vue'

// 搜索功能
const searchQuery = ref('')
const searchEngines = [
  { name: 'Google', url: 'https://www.google.com/search?q=' },
  { name: '百度', url: 'https://www.baidu.com/s?wd=' },
  { name: '必应', url: 'https://www.bing.com/search?q=' },
  { name: 'GitHub', url: 'https://github.com/search?q=' },
  { name: '知乎', url: 'https://www.zhihu.com/search?q=' }
]
const selectedEngine = ref(searchEngines[0])

const performSearch = () => {
  if (searchQuery.value.trim()) {
    window.open(`${selectedEngine.value.url}${encodeURIComponent(searchQuery.value)}`, '_self')
  }
}

// 处理键盘快捷键
const handleKeyPress = (event) => {
  if (event.ctrlKey && event.key === 'k') {
    event.preventDefault()
    document.querySelector('.search-input')?.focus()
  }
}

// 主题切换功能
const isDarkMode = ref(true)
const toggleTheme = () => {
  isDarkMode.value = !isDarkMode.value
  document.body.classList.toggle('light-theme', !isDarkMode.value)
}

// 计算主题相关的样式
const themeStyles = computed(() => {
  return isDarkMode.value 
    ? {
        background: 'linear-gradient(135deg, #667eea 0%, #764ba2 100%)',
        textColor: 'white'
      }
    : {
        background: 'linear-gradient(135deg, #74b9ff 0%, #0984e3 100%)',
        textColor: '#2d3436'
      }
})

// 问候语
const greeting = computed(() => {
  const hour = new Date().getHours()
  if (hour < 6) return '深夜好'
  if (hour < 12) return '早上好'
  if (hour < 18) return '下午好'
  return '晚上好'
})

onMounted(() => {
  document.addEventListener('keydown', handleKeyPress)
  // 初始化主题
  document.body.classList.toggle('light-theme', !isDarkMode.value)
  return () => {
    document.removeEventListener('keydown', handleKeyPress)
  }
})
</script>

<template>
  <div id="app">
    <div class="homepage-container" :style="{ background: themeStyles.background }">
      <!-- 主题切换按钮 -->
      <button @click="toggleTheme" class="theme-toggle">
        {{ isDarkMode ? '☀️' : '🌙' }}
      </button>
      
      <!-- 时间和天气组件 -->
      <TimeWeather />
      
      <!-- 搜索区域 -->
      <div class="search-section">
        <div class="greeting">{{ greeting }}！</div>
        <h1 class="homepage-title" :style="{ color: themeStyles.textColor }">我的浏览器主页</h1>
        <SearchBar 
          v-model:query="searchQuery"
          v-model:engine="selectedEngine"
          :engines="searchEngines"
          @search="performSearch"
        />
      </div>

      <!-- 快捷链接 -->
      <QuickLinks />
    </div>
  </div>
</template>

<style scoped>
.homepage-container {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: 2rem;
  position: relative;
  transition: background 0.5s ease;
}

.theme-toggle {
  position: absolute;
  top: 2rem;
  left: 2rem;
  background: rgba(255, 255, 255, 0.2);
  border: none;
  border-radius: 50%;
  width: 50px;
  height: 50px;
  font-size: 1.5rem;
  cursor: pointer;
  backdrop-filter: blur(10px);
  transition: all 0.3s ease;
  z-index: 1000;
}

.theme-toggle:hover {
  background: rgba(255, 255, 255, 0.3);
  transform: scale(1.1);
}

.search-section {
  text-align: center;
  margin-bottom: 3rem;
  width: 100%;
  max-width: 800px;
}

.greeting {
  font-size: 1.5rem;
  margin-bottom: 0.5rem;
  font-weight: 300;
  text-shadow: 1px 1px 2px rgba(0,0,0,0.3);
}

.homepage-title {
  font-size: 2.5rem;
  margin-bottom: 2rem;
  text-shadow: 2px 2px 4px rgba(0,0,0,0.3);
  font-weight: 300;
  line-height: 1.2;
}

/* 平板设备 (768px - 1024px) */
@media (max-width: 1024px) and (min-width: 769px) {
  .homepage-container {
    padding: 1.5rem;
  }
  
  .homepage-title {
    font-size: 2.2rem;
  }
  
  .greeting {
    font-size: 1.3rem;
  }
}

/* 移动设备 (768px 以下) */
@media (max-width: 768px) {
  .homepage-container {
    padding: 1rem;
    justify-content: flex-start;
    padding-top: 5rem;
  }
  
  .theme-toggle {
    top: 1rem;
    left: 1rem;
    width: 40px;
    height: 40px;
    font-size: 1.2rem;
  }
  
  .search-section {
    margin-bottom: 2rem;
  }
  
  .greeting {
    font-size: 1.2rem;
    margin-bottom: 0.3rem;
  }
  
  .homepage-title {
    font-size: 1.8rem;
    margin-bottom: 1.5rem;
  }
}

/* 小屏手机 (480px 以下) */
@media (max-width: 480px) {
  .homepage-container {
    padding: 0.5rem;
    padding-top: 4rem;
  }
  
  .theme-toggle {
    top: 0.5rem;
    left: 0.5rem;
    width: 35px;
    height: 35px;
    font-size: 1rem;
  }
  
  .greeting {
    font-size: 1.1rem;
  }
  
  .homepage-title {
    font-size: 1.5rem;
    margin-bottom: 1rem;
  }
}

/* 横屏手机优化 */
@media (max-height: 500px) and (orientation: landscape) {
  .homepage-container {
    padding-top: 1rem;
    justify-content: flex-start;
  }
  
  .search-section {
    margin-bottom: 1rem;
  }
}
</style>

<style>
/* 全局样式用于主题切换 */
body.light-theme {
  --text-color: #2d3436;
  --bg-color: #f8f9fa;
}

body:not(.light-theme) {
  --text-color: white;
  --bg-color: #1a1a1a;
}

body {
  margin: 0;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  transition: background-color 0.5s ease, color 0.5s ease;
}

#app {
  color: var(--text-color);
  background-color: var(--bg-color);
}
</style>
